<template>
<div>
  <h2 v-red>我是App组件:{{msg}}</h2>
  <button @click="msg = 'react'">修改msg</button>
  <button @click="count++">修改count</button>
  <button @click="$destroy()">销毁我</button>
  <Count :count="count"></Count>
</div>
</template>


<script>
import Count from "@/components/Count";
export default {
    name:"App",
    components:{
      Count,
    },
  data(){
      return{
        msg:"vue",
        count:0,
      }
  },
  //beforeCreate:数据代理和数据劫持之前(不能获取数据)
  beforeCreate() {
    console.log("----beforeCreate",this.msg)
  },
  //created:在数据代理和数据劫持之后(可以获取数据)
  created() {
    console.log("----created",this.msg)
  },
  //beforeMount:挂载之前(视图还是原始的el的DOM元素,这个节点不能操作DOM)
  beforeMount() {
    console.log("----beforeMount")
  },
  //mounted:挂载之后(此时页面显示真正的DOM元素,)
  mounted() {
    console.log("----mounted")
  },
  beforeUpdate() {
    console.log("----beforeUpdate")
  },
  updated() {
    console.log("----updated")
  },
  beforeDestroy() {
    console.log("----beforeDestroy")
  },
  destroyed() {
    console.log("----destroyed")
  }
}
</script>